<template>
<div>
    <common-header
        :title="title"
        :type=2></common-header>
    <div class="mui-content">
        <mt-navbar v-model="selected">
            <mt-tab-item 
                v-for="(item, index) in categoryList" 
                :key="index"
                :id="item.value">{{ item.label }}</mt-tab-item>
        </mt-navbar>
        <scroller
            ref="my_scroller"
            class="loading-div"
            style="top: 90px"
            :on-refresh="refresh"
            :on-infinite="infinite">
            <ul class="mui-table-view  mui-table-view-chevron buyHandUl">
		        <li class="mui-table-view-cell buyHandLis" v-for="(item, index) in list" :key="index" @click="viewDetail(item)">
		            <ul class="buyHand-list">
		            	<li>
		            		<p class="buyHand-list-title">供应商:</p>
		            		<p class="buyHand-list-cont">{{ item.suppliername }}</p>
		            	</li>
		            	<li>
		            		<p class="buyHand-list-title">上传图片数量:</p>
		            		<p class="buyHand-list-cont">{{ item.sendqty }}</p>
		            	</li>
		            	<li>
		            		<p class="buyHand-list-title">状态:</p>
		            		<p class="buyHand-list-cont">{{ item.bckflag }}</p>
		            	</li>
		            	<li>
		            		<p class="buyHand-list-title">图片合格数量:</p>
		            		<p class="buyHand-list-cont">{{ item.passqty }}</p>
		            	</li>
		            </ul>
		        </li>
		    </ul>
        </scroller>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Navbar, TabItem, TabComtainer, Cell } from 'mint-ui'
import API from '@/service/api'
export default {
    components: { commonHeader, Navbar, TabItem, TabComtainer, Cell },
    data() {
        return {
            title: '买手确认',
            list: [],
            checked: [],
            categoryList: [],
            selected: null,
            isNoData: false,
            pageSize: 10,
            pageIndex: 1,
        }
    },
    computed: {
        ...mapState( [ 'show_check_box', 'search_value' ] ),
    },
    watch: {
        selected(newValue) {
            if(newValue) this.RECORD_SEARCH_VALUE({})
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
        }
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'RECORD_SAMPLE_NO', 'RECORD_SAMPLE_ID', 'UPDAT_SHOW_CHECK_BOX', 'RECORD_SEARCH_VALUE' ] ),
        async refresh (done) {
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
            done()
        },
        async infinite (done) {
            if(this.isNoData) return this.$refs.my_scroller.finishInfinite(true)
            let res = await this.search(this.selected)
            setTimeout(() => {
                if(res.list.length==0){//判断数是否加载完成，就让数据截停
                    this.isNoData = true
                }else{
                    this.list = [...this.list, ...res.list]
                    this.pageIndex++
                }
                done()
            }, 1000)
        },
        initialization() {
            API.dic.getBaseCateGoryList().then(res=> {
                this.categoryList = [ { label: '全部', value: null } ,...res ]
                this.UPDATE_SHOW_LOADING(false)
		    })
        },
        search(id) {
            let data = {}
            if(id) data = { dlid: id }
            else data = this.search_value
            data.pageSize= this.pageSize
            data.pageIndex= this.pageIndex
            return API.confirm.list(data)
        },
        viewDetail(item) {
            // this.RECORD_SAMPLE_NO(item.id)
            // this.RECORD_SAMPLE_ID(item.sampleid)
            this.$router.push( { name: 'confirmList', params: { suppliers: item.supplierid } })
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped>
.imgs{
    width: 100%;
}
</style>